<template>
  <div class="outline-container">
    <ToolbarButton
      type="button"
      icon="i-ri-file-list-3-line"
      title="大纲"
      hideText
      :active="isVisible"
      @click="handleToggleOutline"
    />
  </div>
</template>

<script setup lang="ts">
import { inject, computed, type Ref } from "vue";
import ToolbarButton from "../../button/index.vue";

defineOptions({
  name: "OutlineContainer",
});

// 注入大纲面板显示状态（从 index.vue 提供）
const outlineVisible = inject<Ref<boolean>>("outlineVisible");

// 切换大纲显示
const handleToggleOutline = () => {
  if (outlineVisible) {
    outlineVisible.value = !outlineVisible.value;
  }
};

// 计算按钮激活状态
const isVisible = computed(() => {
  return outlineVisible?.value ?? false;
});
</script>

